<template>
	<div>
		<div class="text-#86909C text-12px flex items-center">
			<p class="mr-20px pt-10px pb-10px pr-20px pl-20px rounded-8px cursor-pointer"
				:class="{ 'text-#ffffff': selected === '1' }" @click="selected = '1'">基础委托</p>
			<p class=" pt-10px pb-10px pr-20px pl-20px rounded-8px cursor-pointer"
				:class="{ 'text-#ffffff': selected === '2' }" @click="selected = '2'">止盈止损委托</p>
		</div>
		<div>
			<SelectTimer>
				<template #default>
					<div>
						<div v-if="selected == '1'" class="mr-10px ml-10px">
							<el-popover placement="bottom-start" :width="340" trigger="hover"
							popper-class="contract-popper-pop-dark"
							:visible="popShow">
								<FilterPop @close="closePopShow"></FilterPop>
								<template #reference>
									<img src="/contract/selected-gray.svg" @click="popShow=true"/>
								</template>
							</el-popover>
							<!-- <img src="/contract/selected-blue.svg" /> -->
						</div>
					</div>
				</template>
			</SelectTimer>
		</div>
		<div class="mt-20px" v-show="selected === '1'">
			<HistoryBase></HistoryBase>
		</div>
		<div class="mt-20px" v-show="selected === '2'">
			<HistoryStop></HistoryStop>
		</div>
	</div>
</template>
<script lang="ts" setup>
import HistoryBase from './HistoryBase.vue';
import HistoryStop from './HistoryStop.vue';
import SelectTimer from '../components/SelectTimer.vue';
import FilterPop from '../pop/FilterPop.vue';
const selected = ref<any>('1');
const timeItem = ref<any[]>([
	"近1个月", "近3个月", "近1年"
]);

const selectedTimeItem = ref<any>("近1个月");
const popShow = ref<boolean>(false);

const closePopShow = (val:any) => {
	popShow.value = val;
};
</script>
<style lang="scss">
.contract-popper-pop-dark{
	background:#121212 !important;
	border-color:#202020 !important;
	.el-popper__arrow{
		display: none;
	}
}
</style>
